<template>
  <div class="new">
    <div class="title tanxin">
      <div class="title_l tanxin">
        <img src="../../assets/images/quan.png" alt="" />
        <h2>新碟上架</h2>
      </div>
      <div class="more">
        <span @click="$router.push(`/discover/album`)">更多</span>
        <img src="../../assets/images/jiantou.png" alt="" />
      </div>
    </div>

    <div class="content">
      <ul class="tanxin">
        <li v-for="(item, index) in Newalbum" :key="index">
          <div class="info" @click="$router.push(`/albumlist/${item.id}`)">
            <img :src="item.picUrl" alt="" />
            <i class="mask"></i>
            <div class="show">
              <i title="播放" class="play"></i>
            </div>
          </div>
          <h3 :title="item.name" class="ellipsis" @click="$router.push(`/albumlist/${item.id}`)">{{ item.name }}</h3>
          <span :title="item.artist.name" @click="$router.push(`/artlist/${item.artist.id}`)">{{ item.artist.name }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import { NewApi } from "@/request/api";
export default {
  data() {
    return {
      Newalbum: "",
    };
  },
  created() {
    NewApi().then((res) => {
      // console.log(res);
      this.Newalbum = res.data.albums.slice(0, 10);
    });
  },
  methods: {
    
  }
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.new {
  .title {
    height: 35px;
    border-bottom: 2px solid @red;
    margin: 20px 0;
    display: flex;
    align-items: center;
    .title_l {
      img {
        width: 15px;
        height: 15px;
        margin: auto;
        padding: 0 10px;
      }
      h2 {
        font-size: 20px;
      }
    }
    .more {
      span {
        cursor: pointer;
        font-size: 12px;
        color: #666666;
        &:hover {
          text-decoration: underline;
        }
      }
      img {
        margin: auto;
        padding: 0 5px;
      }
    }
  }
  .content {
    background: #f5f5f5;
    position: relative;
    margin-bottom: 40px;
    ul {
      flex-wrap: wrap;
      display: flex;
      justify-content: flex-start !important;
      border: 1px solid #d3d3d3;
      padding: 30px 10px;
      li {
        height: 150px;
        width: 100px;
        margin: auto 18px;
        &:nth-of-type(5n) {
            margin-right: 0;
        }
        .info {
          position: relative;
          width: 118px;
          height: 100px;
          overflow: hidden;
          &:hover {
            .show {
              display: block;
            }
            img {
              transform: scale(1.1);
            }
          }
          img {
            width: 100px;
            height: 100px;
          }
          .mask {
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            width: 118px;
            height: 100px;
            display: block;
            background: url("@/assets/images/public/coverall.png") no-repeat;
            background-position: 0 -570px;
          }
          .show {
            display: none;
            i {
              position: absolute;
              bottom: 5px;
              right: 25px;
              height: 30px;
              width: 30px;
              display: block;;
              background: url("../../assets/images/public/iconall.png") no-repeat;
            }
            .play {
              background-position: 0px -140px;
              &:hover {
                  background-position: 0px -170px;
              }
            }
          }
        }
        
        h3 {
          font-size: 12px;
          color: #000;
          padding: 5px 0;
          line-height: 14px;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
        span {
          line-height: 14px;
          font-size: 12px;
          color: #666;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>